<template>
  <div class="roles">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加按钮 -->
    <el-button type="primary" plain class="mb-20">添加角色</el-button>
    <!-- 角色列表 -->  
    <el-table
      :data="rolesList"
      border
      style="width:100%" >
      <el-table-column type="expand" >
        <template v-slot:default="{row}">
          <p v-if="row.children.length===0">暂无数据</p>
          <!-- 整个导航 -->
          <el-row v-for="l1 in row.children" :key="l1.id" class="l1">
            <!-- 一级导航 -->
            <el-col :span="4">
              <el-tag class="grid-content bg-purple-dark" closable @click="deleteTag(row,l1.id)" >
                {{l1.authName}}
              </el-tag>
              <i class="el-icon-arrow-right" ></i>
            </el-col>
            <!-- 二级导航 -->
            <el-col :span="20">
              <el-row v-for="l2 in l1.children" :key="l2.id" class="l2" >
                <el-col :span="4">
                  <el-tag closable type="success" @click="deleteTag(row,l2.id)">
                    {{l2.authName}}
                  </el-tag>
                  <i class="el-icon-arrow-right"></i>
                </el-col>
                <el-col :span="20"  >
                  <el-tag v-for="l3 in l2.children" :key="l3.id"
                   closable class="l3" type="warning" @click="deleteTag(row,l3.id)">
                    {{l3.authName}}
                  </el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column prop="roleName" label="角色名称" ></el-table-column>
      <el-table-column prop="roleDesc" label="描述" ></el-table-column>
      <el-table-column label="操作" >
        <template v-slot:default="{row}">
          <el-button type="primary" icon="el-icon-edit" size="mini" plain ></el-button>
          <el-button type="danger" icon='el-icon-delete' size="mini" plain ></el-button>
          <el-button type="success" icon="el-icon-check" size="mini" plain @click="assignPower(row)">分派权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 权限分配模态框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="assignVisible"
      width="40%">
      <el-tree
        ref="tree"
        node-key="id"
        default-expand-all
        show-checkbox
        :data="data"
        :props="defaultProps"></el-tree>

      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="assignVisible = false">取 消</el-button>
          <el-button @click="assignRights" type="primary">确 定</el-button>
        </span>
      </template>
    </el-dialog>
</div>
</template>

<script>
export default {
  data(){
    return {
      rolesList:[],
      assignVisible:false,
      roleId: '',
      data: [],
      defaultProps: {
        children: 'children', // 通过哪个属性标记下一级
        label: 'authName' // 显示的文本
      }
    }
  },
  created(){
    this.getRolesList();
  },
  mounted(){
    // this.getRolesList();
  },
  methods:{
    // 获取所有的权限列表
    async getRolesList(){
      const res=await this.$axios.get("roles")
        if(res.data.meta.status==200){
          this.rolesList=res.data.data;
        }
    },
    // 点击删除权限
    deleteTag(row,id){
      this.$axios.delete(`roles/${row.id}/rights/${id}`).then(res=>{
        if(res.data.meta.status==200){
          this.$message.success(res.data.meta.msg);
          row.children = res.data.data
        }
      })
    },
    // 权限分配模态框
    async assignPower(row){
      this.assignVisible=true;
      this.roleId = row.id
      // 发送ajax请求, 获取全部的权限列表, 用于树形的展示
      const { meta, data } = await this.$axios.get(`rights/tree`)
      if (data.meta.status === 200) {
        this.data =data.data
         const ids = []
        row.children.forEach(l1 => {
          l1.children.forEach(l2 => {
            l2.children.forEach(l3 => {
              ids.push(l3.id)
            })
          })
        })
        this.$refs.tree.setCheckedKeys(ids)
      } else {
        this.$message.error(meta.msg)
      }
    },
    assignRights () {
      // 分配权限
      // 1. 获取到选中的所有权限id (全选 和 半选的都要)
      const ids = this.$refs.tree.getCheckedKeys()
      const halfs = this.$refs.tree.getHalfCheckedKeys()
      const rids = [...ids, ...halfs].join(',')

      // 2. 拿到id, 发送分配的ajax了
      this.$axios.post(`roles/${this.roleId}/rights`, { rids }).then(res=>{
      if (res.data.meta.status === 200) {
        this.$message.success(res.data.meta.msg)
        this.assignVisible = false
        this.getRolesList()
      } else {
        this.$message.error(res.data.meta.msg)
      }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.roles{
   width:100%;
  .mb-20{
    margin-top:20px;
    margin-bottom:20px;
  }
  .el-breadcrumb{
    width: 100%;
  }
  .el-row{
    margin-bottom: 10px;
    border-bottom:1px solid rgb(14, 233, 233);
  }
  .l1 {
    padding: 5px;
    margin-bottom: 5px;
    border-bottom: 1px dotted #ccc;
  }
  .l2 {
    margin-bottom: 5px;
  }
  .l3 {
    margin-right: 5px;
    margin-bottom: 5px;
  }
}
</style>